<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .form {
            width: 422px;
            /* 没写高度 */
            background-color: #5b6807;
            padding: 11px 21px;
            margin: auto;
        }

        .form dt {
            line-height: 40px;
        }

        .form dd {
            height: 42px;
            border: 2px solid rgba(255, 255, 255, 0.7);
            background-color: rgba(255, 255, 255, .3);
            border-radius: 6px;
            line-height: 42px;
            margin-bottom: 2px;
        }

        .form dd label {
            margin-left: 10px;
        }

        .form dd input {
            width: 210px;
            height: 30px;
            float: right;
            margin: 6px 70px 0 0;
            border-radius: 4px;
            padding: 0 5px;
        }

        .form .area {
            height: 120px;
        }

        .form dd textarea {
            width: 210px;
            height: 84px;
            float: right;
            margin: 6px 70px 0 0;
            border-radius: 4px;
            padding: 5px;
        }

        .form dd select {
            width: 210px;
            height: 30px;
            float: right;
            margin: 6px 70px 0 0;
        }

        .form .radio {
            height: 74px;
        }

        .form .radio p {
            margin-left: 10px;
        }

        .form .radio label {
            float: left;
            line-height: 26px;
            margin-right: 10px;
        }

        .form .radio input {
            margin-left: 20px;
            width: 14px;
            height: 14px;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>

    <h1>学会样式覆盖和label标签的使用！！！！！！！！！</h1>

    <div class="form">
        <dl>
            <dt>step1</dt>
            <dd>
                <label for="">Name</label>
                <input type="text" placeholder="First name and last name">
            </dd>
            <dd>
                <label for="">Email</label>
                <input type="text" placeholder="First name and last name">
            </dd>
            <dd>
                <label for="">Phone</label>
                <input type="text" placeholder="First name and last name">
            </dd>
        </dl>
        <dl>
            <dt>step2</dt>
            <dd class="area">
                <label for="">Name</label>
                <textarea></textarea>
            </dd>
            <dd>
                <label for="">Email</label>
                <input type="text" placeholder="First name and last name">
            </dd>
            <dd>
                <label for="">Phone</label>
                <input type="text" placeholder="First name and last name">
            </dd>
        </dl>
        <dl>
            <dt>step3</dt>
            <dd class="radio">
                <p>Cart type</p>
                <input type="radio" name="a"><label for="">aaa</label>
                <input type="radio" name="a"><label for="">aaa</label>
                <input type="radio" name="a"><label for="">aaa</label>
            </dd>
            <dd>
                <label for="">sssss</label>
                <select name="" id="">
                    <option value=""></option>
                </select>
            </dd>
            <dd>
                <label for="">sssss</label>
                <select name="" id="">
                    <option value=""></option>
                </select>
            </dd>
            <dd>
                <label for="">Phone</label>
                <input type="text" placeholder="First name and last name">
            </dd>
        </dl>
    </div>

</body>

</html>